<template>
    <div class="collect-box" v-loading="loading">
        <el-form :model="collectData.collectionActivityVo" ref="collectData" inline label-width="120px" class="collect-ruleForm">
            <!-- 基础配置 -->
            <div v-if="!activityId || (activityId && isGetData)">
                <topTitle title="基础配置" style="padding-left: 15px;"/>
                <baseRule ref="baseRule" :collectionActivityVo="collectData.collectionActivityVo" :baseChange="baseChange"></baseRule>
            </div>
            <!-- 奖励规则 -->
            <div v-if="!activityId || (activityId && isGetData)">
                <topTitle title="奖励规则" style="padding-left: 15px;"/>
                <collectRule ref="collectRule" :collectionActivityRuleList="collectData.collectionActivityVo.collectionActivityRuleList" :dataChange="dataChange"></collectRule>
            </div>
            <!-- 赛道配置 -->
            <div v-if="!activityId || (activityId && isGetData)" style="margin-bottom: 20px;">
                <topTitle title="赛道配置" style="padding-left: 15px;"/>
                <raceRule ref="raceRule" :collectionActivityVo="collectData.collectionActivityRaceVoList" :raceChange="raceChange"></raceRule>
            </div>
            <el-form-item>
                <el-button type="primary" @click="cancelForm">取消</el-button>
                <el-button type="primary" @click="submitForm">保存</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import collectRule from './component/collectRule'
import baseRule from './component/baseRule'
import raceRule from './component/raceRule'
export default {
    components: {
        collectRule,
        baseRule,
        raceRule
    },
    data () {
        return {
            collectData: {
                collectionActivityVo: {
                    startTime: '',
                    collectionActivityRuleList: []
                },
                collectionActivityRaceVoList: []
            },
            isLastReward: false,
            isCreate: false,
            loading: false,
            dialogVisible: false,
            isGetData: false
        }
    },
    created () {
        this.activityId = this.$route.query.id || null
        this.status = this.$route.query.status
        this.collectData.collectionActivityVo.targetType = parseInt(this.$route.query.targetType)
        if (this.activityId) {
            this.getDetail()
        } else {
            this.collectData.collectionActivityRaceVoList.push({
                raceType: '',
                raceDesc: '',
                joinType: null,
                auditType: 0,
                limitDay: null,
                gameArr: [],
                gameInfoList: [],
                collectionActivityFirstRewardVoList: [
                    {
                        rewardType: '',
                        rewardValue: ''
                    }
                ],
                collectionActivityLastRewardVoList: [
                    {
                        targetType: 1,
                        targetValue: '',
                        gameInfoList: [],
                        collectionActivityRewardTypeLists: [
                            {
                                rewardType: 1,
                                rewardValue: ''
                            }
                        ]
                    }
                ]
            })
            this.collectData.collectionActivityVo.collectionActivityRuleList.push({
                remark: '',
                ruleDetail: '',
                ruleName: ''
            })
            this.isGetData = true
        }
    },
    methods: {
        getDetail () { // 获取征集详情
            this.$http.get('/gameList/collectionDtail', {
                params: { activityId: this.activityId }
            }).then(res => {
                if (res.code === '0') {
                    this.collectData = res.data
                    if (!this.collectData.collectionActivityVo.collectionActivityRuleList) {
                        this.collectData.collectionActivityVo.collectionActivityRuleList = []
                        this.collectData.collectionActivityVo.collectionActivityRuleList.push({
                            remark: '',
                            ruleDetail: '',
                            ruleName: ''
                        })
                    }
                    this.isGetData = true
                } else {
                    this.$message({
                        type: 'error',
                        message: '系统异常，请稍后再试'
                    })
                }
            })
        },
        submitForm (type) { // 提交表单
            if (this.status === -1) {
                this.$message({
                    type: 'error',
                    message: '查看的活动不允许修改'
                })
            } else {
                if (this.isCreate) return
                if (this.$refs.baseRule.validateForm() && this.$refs.collectRule.validateForm() && this.$refs.raceRule.validateForm()) {
                    // delete this.collectData
                    // this.collectData.collectionActivityRaceVoList.forEach(item => {
                    //     delete item.gameArr
                    // })
                    this.$http.post('/gameList/createCollectionList', this.collectData).then(res => {
                        if (res.code === '0') {
                            this.isCreate = true
                            this.$message({
                                type: 'success',
                                message: '保存成功'
                            })
                            setTimeout(() => {
                                this.$router.push('/collect/list')
                            }, 1000)
                        } else {
                            this.$message({
                                type: 'error',
                                message: '系统异常，请稍后再试'
                            })
                        }
                    })
                } else {
                    if (this.isLastReward) {
                        return this.$message({
                            type: 'warning',
                            message: '请完善最终奖励'
                        })
                    } else {
                        this.$message({
                            type: 'warning',
                            message: '请将表单信息填写完整'
                        })
                    }
                }
            }
        },
        cancelForm () {
            this.$router.push('/collect/list')
        },
        validateForm () {
            let flag = true
            this.$refs['lotteryData'].validate(valid => {
                if (!valid) {
                    flag = false
                }
            })
            for (let i in this.lotteryData.luckyGameInfoList) {
                this.$refs[`lotteryData-${i}`][0].validate(valid => {
                    if (!valid) {
                        flag = false
                    }
                })
            }
            return flag
        },
        dataChange (data) {
            this.isLastReward = false
            this.collectData.collectionActivityVo.collectionActivityRuleList = data
        },
        baseChange (data) {
            this.isLastReward = false
            this.collectData.collectionActivityVo = data
        },
        raceChange (data, isLastReward) {
            if (isLastReward) {
                this.isLastReward = true
            } else {
                this.collectData.collectionActivityRaceVoList = data
            }
        },
        moduleChange (item) {
            this.collectData.timeType = item
        }
    }
}
</script>

<style lang="scss" scoped>
    .collect-box {
        // max-width: 800px;
        .addGame-dialog {
            /deep/ .el-dialog__header {
                padding-top: 0;
                padding-bottom: 1px;
            }
            /deep/ .el-dialog__body {
                padding-top: 0;
            }
        }
        .act-rule-form {
            /deep/.el-form-item__content {
                margin-left: 0 !important;
            }
        }
    }
    .delGame {
        margin-left: 10px;
        cursor: pointer;
    }
    .colorspan {
        display: inline-block;
        width: 10px;
        height: 16px;
        margin-left: 2px;
    }
    .btn-wrap {
        margin-left: 120px;
        margin-bottom: 20px;
        .delModule {
            margin-left: 10px;
            cursor: pointer;
        }
    }
    .span-btn {
        margin-right: 5px;
        color: cadetblue;
        cursor: pointer;
    }
</style>
